<template>
	<div class="copy_trigger_popup">
		<div class="list_title">复制进度</div>
		<div class="list_wrap">
			<div v-for="(item, index) in copyList" :key="index" class="list_item">
				<svg class="icon" aria-hidden="true">
					<use xlink:href="#icon-shezhirichengbiao2" />
				</svg>
				<div class="list_info">
					<div class="title">{{ item.activityName }}</div>
					<a-progress
						class="progress"
						:percent="1"
						:status="item.copyStatus === 3 ? 'danger' : undefined"
						:show-text="false"
					/>
					<div class="status_text">{{ copyStatusTextFilter(item.copyStatus) }}</div>
				</div>
				<div class="operate_wrap">
					<a-button v-if="item.copyStatus === 3" size="mini" @click="reCopyLibrary(item.id)">
						<template #icon>
							<icon-refresh />
						</template>
						<template #default>重试</template>
					</a-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { ref, onUnmounted, onMounted } from 'vue';
import { activity, errors } from '@/api';
import { Message } from '@arco-design/web-vue';
interface copyItemType {
	activityName: string;
	activityIdNew: number;
	activityIdOld: number;
	allNumber: number;
	copyNumber: number;
	copyStatus: number;
	createTime: number;
	id: number;
}
const copyList = ref<Array<copyItemType>>([]);
const getCopyList = async () => {
	try {
		const { data, ok } = await activity.getCopyingList();
		if (!ok) {
			return;
		}
		copyList.value = data.data;
	} catch (error) {
		errors(error);
	}
};
const copyStatusTextFilter = (status: number) => {
	const statusTextList = ['', '复制中', '复制成功', '复制失败'];
	return statusTextList[status];
};
const reCopyLibrary = async (caseId: number) => {
	try {
		const { data, ok } = await activity.reCopyLibrary(caseId);
		if (!ok) {
			return;
		}
		Message.success(data.msg);
	} catch (error) {
		errors(error);
	}
};
let timer: any;
onMounted(() => {
	getCopyList();
	clearInterval(timer);
	timer = setInterval(() => {
		getCopyList();
	}, 8000);
});
onUnmounted(() => {
	clearInterval(timer);
});
</script>
<style lang="less">
.copy_trigger_popup {
	width: 370px;
	height: 270px;
	box-sizing: border-box;
	padding: 16px;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 8px #00000026;
	.list_title {
		color: #262626;
		font-size: 14px;
		line-height: 20px;
		font-weight: 700;
	}
	.list_wrap {
		margin-top: 12px;
		width: 100%;
		height: calc(100% - 32px);
		overflow-x: hidden;
		overflow-y: auto;
	}
	.list_item {
		display: flex;
		flex-flow: row nowrap;
		.icon {
			width: 32px;
			height: 32px;
			font-size: 32px;
			display: block;
			flex-shrink: 0;
		}
		& + .list_item {
			margin-top: 16px;
		}
	}
	.list_info {
		margin-left: 8px;
		width: calc(100% - 100px);
		flex-grow: 1;
		display: flex;
		flex-flow: column nowrap;
		.title {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			font-size: 14px;
			line-height: 20px;
			color: #595959;
		}
		.progress {
			margin-top: 4px;
			width: 100%;
		}
		.status_text {
			margin-top: 4px;
			font-size: 12px;
			line-height: 18px;
			color: #808080;
		}
	}
	.operate_wrap {
		min-width: 36px;
		flex-shrink: 0;
		margin-left: 8px;
		align-self: center;
		.arco-btn-icon {
			vertical-align: middle;
		}
	}
}
</style>
